<template>
  <div>
    <div class="messages-box">
      <h1>留言板</h1>
      <div class="messages">
        <div class="outside-box">
          <div class="edit">
            <!-- <div
              contentEditable
              rows="5"
              class="edit-box"
              id="edit-box"
              placeholder="请输入您的留言"
            ></div> -->
            <el-input type="textarea" v-model="newRemark" placeholder="请输入您的留言"></el-input>
            <!-- <button class="msg-button" onclick="remark()">留言</button> -->
            <el-button
              type="primary"
              class="remark-btn"
              size="small"
              @click="remark()"
              >留言</el-button
            >
          </div>

          <div class="chat" id="chat">
            <div class="chat-box" v-for="(remark,index) in remarks" :key="index">
              <div class="remark-box">
                <label class="msg-user">{{ remark.rmkUser }}:</label>
                {{ remark.rmkContent }}
              </div>
              <div
                class="replys"
                v-for="reply in remark.replys"
                :key="reply.rpyId"
              >
                <!-- 字体变成14号试一试 -->
                <div class="reply">
                  <label class="msg-user">{{ reply.rpyUser }}:</label>
                  {{ reply.rpyContent }}
                </div>
              </div>
              <div>
                <!-- <div
                  contentEditable
                  rows="2"
                  class="reply-edit-box"
                  placeholder="请输入您的回复"
                  
                ></div> -->
                <el-input v-model="newReply[index]" placeholder="请输入您的回复">
                  <el-button
                    class="reply-button"
                    @click="reply(remark.rmkId,index)"
                    slot="append"
                    >回复</el-button
                  >
                </el-input>
              </div>
            </div>
            <p id="chat-bottom"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import "../styles/contact.css";

.messages-box {
  width: 1050px;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
}
</style>

<script>
export default {
  data() {
    return {
      newRemark: "",
      newReply: [],
      remarks: [
        {
          rmkId: "1",
          rmkTime: "sss",
          rmkUser: "Sam",
          rmkContent: "bbb",
          replys: [
            {
              rpyId: "1",
              rpyTime: "2020-11-07 15:31",
              rpyUser: "Constance",
              rpyContent: "aaa"
            },
            {
              rpyId: "2",
              rpyTime: "2020-11-07 15:32",
              rpyUser: "Mike",
              rpyContent: "bbb"
            }
          ]
        },
        {
          rmkId: "2",
          rmkTime: "sss",
          rmkUser: "Sam",
          rmkContent: "bbb",
          replys: [
            {
              rpyId: "1",
              rpyTime: "2020-11-07 15:31",
              rpyUser: "Constance",
              rpyContent: "aaa"
            },
            {
              rpyId: "2",
              rpyTime: "2020-11-07 15:32",
              rpyUser: "Mike",
              rpyContent: "bbb"
            }
          ]
        }
      ]
    };
  },
  name: "Messages",
  created: function() {
    let that = this;
    let qs = this.$qs;
    this.$http({
      url: "servlet/remarkAndReply",
      method: "post",
      transformRequest: [
        function(data) {
          //在请求之前对data传参进行格式转换
          data = qs.stringify(data);
          return data;
        }
      ],
      data: {
        funcType: 0
      },
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
      }
    }).then(
      function(res) {
        that.remarks = res.data.remarks;
        that.newReply=[];
        for(let i=0;i<that.remarks.length;i++){
          that.newReply.push("");
        }
      },
      function(res) {
        console.log(res);
        console.log("啊呀，Messages-showMessages出错啦");
      }
    );

    this.newRemark=sessionStorage.getItem("remark");
    console.log(this.newRemark);

    let replyBefore=JSON.parse(sessionStorage.getItem("reply"));

    this.newReply[replyBefore.index]=replyBefore.reply;
    console.log(this.newReply[replyBefore.index]);


  },
  methods: {
    remark() {
      var isLogined = JSON.parse(sessionStorage.getItem("isLogined"));
      var d = new Date();
      var remarkTime =
        "" +
        d.getFullYear() +
        "-" +
        (d.getMonth() +1)+
        "-" +
        d.getDate() +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();
      if (!isLogined) {
        this.$message({
          message: "请登录或注册后登录后再留言",
          type: "error"
        });

        sessionStorage.setItem("remark",this.newRemark);

        this.$router.replace("/login");
      } else {
        console.log("留言");
        var user = sessionStorage.getItem("user");
        let that = this;
        let qs = this.$qs;
        this.$http({
          url: "servlet/remarkAndReply",
          method: "post",
          transformRequest: [
            function(data) {
              //在请求之前对data传参进行格式转换
              data = qs.stringify(data);
              return data;
            }
          ],
          data: {
            funcType: 1,
            rmkUser: user,
            rmkTime: remarkTime,
            rmkContent: that.newRemark
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
          }
        }).then(
          function(res) {
            that.remarks = res.data.remarks;
            sessionStorage.setItem("remark","");
          },
          function(res) {
            console.log(res);
            console.log("啊呀，messages-remark出错啦");
            that.newReply.push("");
          }
        );
        this.newRemark="";
      }
    },
    reply(rmkId,index) {
      var isLogined = JSON.parse(sessionStorage.getItem("isLogined"));
      var d = new Date();
      var replyTime =
        "" +
        d.getFullYear() +
        "-" +
        (d.getMonth() +1)+
        "-" +
        d.getDate() +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();
      if (!isLogined) {
        this.$message({
          message: "请登录或注册后登录再回复",
          type: "error"
        });

        let Breply={
          index:index,
          reply:this.newReply[index]
        }

        let str=JSON.stringify(Breply);

        sessionStorage.setItem("reply",str)

        this.$router.replace("/login");
      } else {
        var user = sessionStorage.getItem("user");
        let that = this;
        let qs = this.$qs;
        this.$http({
          url: "servlet/remarkAndReply",
          method: "post",
          transformRequest: [
            function(data) {
              //在请求之前对data传参进行格式转换
              data = qs.stringify(data);
              return data;
            }
          ],
          data: {
            funcType: 2,
            rmkId: rmkId,
            rpyUser: user,
            rpyTime: replyTime,
            rpyContent: that.newReply[index]
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
          }
        }).then(
          function(res) {
            that.remarks = res.data.remarks;
          },
          function(res) {
            console.log(res);
            console.log("啊呀，messages-reply出错啦");
          }
        );
        this.newReply="";
      }
    }
  }
};
</script>
